<template>

    <el-container style="height: 100%" ref="bodyform">
        <div class="el_main_content">
        <div class="main_content_header">这是一个对话框</div>
        <div class="main_content_center">
            <el-scrollbar
                class="faultExpertConsultation_scrollbar"
                ref="scrollbarRef" >

                <!--对话内容-->
                <div
                    v-for="(item, index) in messagesWithTimestamps"
                    :key="index"
                    v-show="messagesWithTimestamps.length > 0" >

                    <!--对话时间-->
                    <div v-if="item.showTime" class="chat_time">
                        {{ formatSendTime(item.timestamp) }}
                    </div>

                    <!--提问-->
                    <div class="question chat" v-if="item.question">
                        <div class="chat_question chat_common">
                            <span>{{ item.question }}</span>
                        </div>
                        <el-avatar class="avatar" :src="avatarUrl">
                            <span class="me">我</span>
                        </el-avatar>
                    </div>

                    <!--回答-->
                    <div class="answer chat" v-if="item.answer">
                        <el-avatar class="avatar" :src="robot" />
                        <div class="chat_answer chat_common">
                            <span>{{ item.answer }}</span>
                        </div>
                    </div>

                </div>
            </el-scrollbar>
        </div>
        <div class="main_content_footer">
            <div class="input_box">
                <textarea class="chat-input no-border" v-model="question" />
            </div>
            <div class="btn_box">
                <el-button type="primary" class="btn" @click="askClick(question)"
                    >发送</el-button >
             </div>
        </div>
        <div class="main_content_footer">
            <div class="input_box">
                <textarea class="chat-input no-border" v-model="answer" />
                </div>
                <div class="btn_box">
                <el-button type="primary" class="btn" @click="ansClick(answer)"
                    >回答</el-button >
            </div>
        </div>
     </div>
    </el-container>
</template>

<script setup>
import { ref, onMounted, nextTick, computed, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const question = ref(""); //输入框值
const chatList = ref([]); //循环的聊天数组
const scrollbarRef = ref(null);
// 初始化avatarUrl为空字符串
const avatarUrl = "https://img1.baidu.com/it/u=2149795385,3590548205&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360";
//创建新的对话数组，加上属性showTime
const messagesWithTimestamps = computed(() => {
  return chatList.value.map((item, index) => ({
    ...item,
    showTime: index === 0 || shouldShowTime(index),
  }));
});
//计算两次会话时间是否超过3分钟方法
const shouldShowTime = (index) => {
  const current = new Date(chatList.value[index - 1].timestamp);
  const next = new Date(chatList.value[index].timestamp);
  const diff = next ? next - current : 0;
  return diff > 3 * 60 * 1000; // 如果间隔超过3分钟返回true
};
//提问方法
const askClick = (val) => {
  if (val != "") {
    chatList.value.push({
      question: val, //问题
      answer: "", //回答
      timestamp: new Date(), //时间戳
      to: "", //接收者
      form: "", //发送者
    });
  } else {
    ElMessage("不能发送空白消息");
  }
};
// 回答方法
const ansClick = (val) => {
  if (val != "") {
    chatList.value.push({
      question: "", //问题
      answer: val, //回答
      timestamp: new Date(), //时间戳
      to: "", //接收者
      form: "", //发送者
    });
  } else {
    ElMessage("不能发送空白消息");
  }
};
//滚动事件到底部事件
const scrollToBottom = () => {
  nextTick(() => {
    let chat = document.querySelector(".main_content_center");
    scrollbarRef.value.wrapRef.scrollTop = chat.scrollHeight;
  });
};
watch(
  chatList.value,
  (newVal, oldVal) => {
    scrollToBottom();
  },
  { immediate: true }
);
 
const formatSendTime = (sendTime) => {
  const now = new Date();
  const sendDate = new Date(sendTime);
  // 计算时间差（以毫秒为单位）
  const timeDiff = now - sendDate;
  const startOfToday = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate()
  );
  const startOfTargetDate = new Date(
    sendDate.getFullYear(),
    sendDate.getMonth(),
    sendDate.getDate()
  );
  // 一天内的毫秒数
  const oneDay = 24 * 60 * 60 * 1000;
  // 如果发送时间在当前时间之前
  if (timeDiff < 0) {
    return "Invalid time"; // 或者其他错误处理
  }
  // 发生在同一天
  if (startOfToday.getTime() === startOfTargetDate.getTime()) {
    return formatTime(sendDate);
  }
  // 如果发送时间在一天内
  if (timeDiff < oneDay) {
    return "昨天 " + formatTime(sendDate);
  }
  // 如果发送时间在二天至七天内
  if (timeDiff < 7 * oneDay) {
    const weekday = getWeekday(sendDate);
    return weekday + " " + formatTime(sendDate);
  }
  // 如果发送时间超过七天
  return (
    sendDate.toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    }) +
    " " +
    formatTime(sendDate)
  );
};
const formatTime = (date) => {
  // 格式化时间为“时:分”
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  return hours + ":" + minutes;
};
const getWeekday = (date) => {
  // 获取星期几的中文表示
  const weekdays = [
    "星期天",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  return weekdays[date.getDay()];
};
</script>

<style scoped>
  .no-border {
    border: none;
    /* 可选的样式，以去除焦点时的边框（如果需要的话） */
    outline: none;
    width: none;
    height: none;
    resize: none;
  }
  .el_main_content {
    width: 60%;
    height: 70%;
    border-radius: 5px;
    border: 1px solid #e4e7ed;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    margin: auto;
  
    .main_content_header {
      width: 100%;
      height: 50px;
      border-radius: 5px;
      background-color: #7de0bd;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
  
    .main_content_center {
      width: 100%;
      position: relative;
      height: 600px;
      /* height: calc(100% - 170px); */
      margin: 10px 0px;
  
      .chat_time {
        display: flex;
        justify-content: center;
        font-size: 10px;
      }
      .question {
        justify-content: flex-end;
      }
      .chat_question {
        background-color: #8ce45f;
        margin-right: 5px;
        color: #ffffff;
      }
      .chat_answer {
        background-color: #f2f3f5;
        margin-left: 5px;
      }
      .chat {
        width: 98%;
        margin: 10px auto;
        display: flex;
      }
      .chat_common {
        max-width: 40%;
        padding: 10px;
        border-radius: 2px;
        word-break: break-all;
        display: flex;
        align-items: center;
      }
      .avatar {
        background-color: #409eff;
        border: 2px solid #409eff;
      }
      .me {
        font-size: 16px;
        color: #ffffff;
        font-weight: bold;
      }
    }
  
    .main_content_footer {
      display: flex; /* 使用弹性盒模型 */
      border-top: 1px solid #e4e7ed;
      .input_box {
        width: 100%;
        height: 60px;
        .chat-input {
          width: calc(100% - 50px);
          padding: 10px;
        }
      }
      .main_content_footer dev{
        margin-right: 10px; /* 可选，为了在元素间添加间隔 */
      }
      .btn_box {
        height: 40px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .btn {
          margin-right: 10px;
        }
      }
    }
  }
</style>
  